<template>
  <TitleCard :title="cardTitleStation" :showMore="showMore">
    <div class="backStack-issue-wrap informationCreate">
      <From
        ref="formRef"
        layoutType="grid"
        :isErrorMessage="false"
        :optionList="copyList"
        :formRules="formRules"
        :defaultModel="defaultModel"
      >
      </From>
      <div class="serviceStation">
        <div
          class="chart-main"
          ref="chartInstance"
          style="width: 100%; height: calc(100vh / 3 * 2); top: 7%; left: 3%"
        ></div>
        <div class="serviceStation-info">
          <span>基准点参考值</span>
          <div v-for="(item, index) in coordinateList" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="backStack-issue-footer-wrap">
        <div class="submit-wrap">
          <a-button class="submit-audit" @click="toAudit">保存并发布</a-button>
        </div>
      </div>
    </div>
  </TitleCard>
</template>

<script>
import mixinsBackStack from '@/views/backstageSupport/mixins'
import From from '../../components/formTable/form.vue'
import mixinConfigSetting from '@/mixins/mixinConfigSetting'
import { formRules, formRows } from './configs/formOptions.js'
import { addServiceStation } from '@/api/serviceStation'
import { cloneDeep } from 'lodash'

import { initOptions, coordinateList } from './configs/mapConfig.js'
import { getDataJson } from '@/api/_utils.js'
import { MixinChartsOptions } from '@/utils/chartsOptionsMixin'
const mixinsOptions = new MixinChartsOptions()

export default {
  mixins: [mixinsBackStack, mixinConfigSetting],
  data() {
    return {
      cardTitleStation: '服务站点信息录入',
      loading: true,
      formRows, // 表单item配置
      formRules, // 表单校验规则配置
      defaultModel: {},
      isRead: false,
      copyList: [],
      myCharts: null,
      mapName: 'foshan',
      initOptions,
      coordinateList,
      geo: {
        map: 'foshan',
        title: { text: '地图' }
      },
    }
  },
  components: {
    From
  },
  created() {
    this.copyList = cloneDeep(this.formRows)
  },
  mounted() {
    this.myCharts = this.$echarts.init(this.$refs.chartInstance);
    this.initChart()
  },
  methods: {
    async initChart() {
      try {
        const res = await getDataJson(this.mapName);
        const seriesOpt = this.initOptions.series[0]
        seriesOpt.map = this.geo.map
        seriesOpt.data = []
        this.initOptions.visualMap.max = 1
        this.initOptions.geo.map = this.geo.map
        this.$echarts.registerMap(this.geo.map, res)
        const mixedOptions = mixinsOptions.mixinOptions(this.geo, this.initOptions || {})
        this.myCharts.setOption(mixedOptions)
        this.$nextTick(() => {
          setTimeout(() => this.resize(), 500)
        })
      } catch (error) {
        console.error(error)
      }
    },
    resize() {
      this.myCharts.resize()
    },
    async toAudit() {
      const v = this.$refs.formRef.validatedForm()
      if (!v) return
      try {
        const { type, name, site, telephone, xpos, ypos, content, ...formValue } = this.$refs.formRef.formModel
        const img = this.handlerPicPathIds(formValue).join(',')
        const params = {
          content,
          type,
          img,
          name,
          site,
          telephone,
          xpos,
          ypos
        }
        const { msg, code } = await addServiceStation(params)
        this.$apiStatusHandler(code, msg)
        if (code === 200) {
          window.location.reload()
        }
      } catch (error) {
        console.log(error)
        this.$apiStatusHandler(99, error)
      }
    },
    handlerPicPathIds(instance) {
      const { img } = instance
      if (!img) return []
      return img.reduce((pre, item) => {
        const { fileId } = item.response.data[0]
        pre.push(fileId)
        return pre
      }, [])
    },
  }
}
</script>

<style lang="scss" scoped>
.chart-main > div > canvas:hover {
  cursor: default;
}
</style>